<!-- 添加设备 -->
<template>
  <div id="dialog-container">
    <el-button type="primary" size="small" plain @click="dialogVisible = true">添加设备</el-button>
    <el-dialog v-dialogDrag :title="'检测设备'" append-to-body width="710px" :before-close="handleClose" :visible.sync="dialogVisible" :close-on-click-modal="false">
      <el-form :model="form" :inline="true" size="small" label-width="90px">
        <el-form-item label="设备编号：">
          <el-input v-model="form.code"></el-input>
        </el-form-item>
        <el-form-item label="设备名称：">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-button type="primary" plain size="small" @click="showList">查询</el-button>
      </el-form>
      <el-table :data="tableData" ref="multipleTable" size="small" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50"></el-table-column>
          <el-table-column type="index" align="center" label="序号" width="50"></el-table-column>
          <el-table-column prop="code" align="center" label="设备编号" min-width="100"></el-table-column>
          <el-table-column prop="name" align="center" label="设备名称" min-width="100"></el-table-column>
        </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="choose">确 定</el-button>
        <el-button @click="handleClose">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getDviceList } from 'service/task';
  export default {
    data() {
      return {
        dialogVisible: false,
        form: {
          code: '',
          name: ''
        },
        tableData: [],
        deviceData: [],
        loading: false
      };
    },
    mounted() {
      this.showList();
    },
    methods: {
      handleClose() {
        this.form.code = '';
        this.form.name = '';
        this.$refs.multipleTable.clearSelection();
        this.dialogVisible = false;
      },
      showList() {
        let params = {
              code: this.form.code,
              name: this.form.name,
              pageNumber: this.currentPage,
              pageSize: this.pageSize,
              sort: '',
              order: '',
            };
        this.loading = true;
        getDviceList(params)
        // this.axios.get('/system/deviceList', params)
          .then(res => {
            this.tableData = res.data.result.content;
            this.currentPage = res.data.result.pageable.pageNumber;
            this.pageSize = res.data.result.pageable.pageSize;
            this.pageTotal = res.data.result.totalPages;
            this.loading = false;
          });
      }, 
      handleSelectionChange(val) {
        this.deviceData = val;
      },
      choose() {
        this.$emit('updateDevice', this.deviceData);
        this.dialogVisible = false;
      }
    }
  }

</script>
